<!DOCTYPE html>
<html lang="en">
  <head>
     
    <meta charset="UTF-8" />
     
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     
    <title>Document</title>
  </head>
  <body>
      <input type="text" name="" id="username" placeholder="请输入用户名" />  
    <br />
      <input type="password" name="" id="password" placeholder="请输入密码" />  
    <br />
      <input type="checkbox" id="checkbox" />   <label>记住密码</label>   <br />
      <button id="button">登录</button>

     
    <script>
      // 用于获取页面的元素
      const btn = document.querySelector("#button");
      const username = document.querySelector("#username");
      const password = document.querySelector("#password");
      const checkbox = document.querySelector("#checkbox"); // 给按钮元素添加点击事件 // btn.onclick = () => { //   console.log(username.value); //   console.log(password.value); //   console.log(checkbox.checked); // }

      let name = localStorage.getItem("username") || null;
      let pwd = localStorage.getItem("password") || null;
      [username.value, password.value] = [name, pwd];

      btn.onclick = () => {
        checkbox.checked
          ? localStorage.setItem("password", password.value) &
            localStorage.setItem("username", username.value)
          : localStorage.clear(); // if (checkbox.checked) { //     localStorage.setItem("password",password.value) //     localStorage.setItem("username",username.value) // } else { //     console.log(1); // }
      };
    </script>
  </body>
</html>
